<template>
  <div class="component__course_card_new" @click="toPath(detail.id)">
    <div :class="['course-box', kl_md.KLGL == 1 ? 'gelin-card' : '']">
      <div class="course-left">
        <div class="course-name">
          {{ detail.courseName }}
        </div>
        <div
          class="course-info-discount"
          v-if="
            !is_show_price &&
              !is_hidden_content &&
              detail.isDiscount &&
              !detail.isFree
          "
        >
          <div class="price">
            <span>￥</span
            ><span style="font-size:.3456rem">{{ detail.price }}</span>
          </div>
          <div class="course-content">
            <div class="content-left">
              <span>活动价：</span
              ><span style="color:#999999">{{ detail.discountPrice }}</span>
            </div>
            <div class="content-right">
              {{ detail.acName }}
            </div>
          </div>
        </div>
        <div
          class="course-info-discount"
          v-if="
            !is_show_price &&
              !is_hidden_content &&
              !detail.isDiscount &&
              kl_md.KLHY == 1 &&
              !isMemberFree &&
              !detail.isFree &&
              is_member
          "
        >
          <div class="price">
            <span>￥</span
            ><span style="font-size:.3456rem">{{ detail.price }}</span>
          </div>
          <div class="course-content">
            <div class="content-left">
              <span v-if="user_member && user_member.memberLevel === 0"
                ><span>会员价：</span
                ><span style="color:#999999">{{
                  Number(detail.smallMemberPrice).toFixed(2)
                }}</span></span
              >
              <span v-if="user_member && user_member.memberLevel === 1"
                ><span>会员价：</span
                ><span style="color:#999999">{{
                  Number(detail.middleMemberPrice).toFixed(2)
                }}</span></span
              >
              <span v-if="user_member && user_member.memberLevel === 2"
                ><span>会员价：</span
                ><span style="color:#999999">{{
                  Number(detail.highMemberPrice).toFixed(2)
                }}</span></span
              >
            </div>
            <div class="content-right">
              {{ detail.acName }}
            </div>
          </div>
        </div>
        <div
          class="course-info-not-discount"
          v-if="
            !is_show_price &&
              !is_hidden_content &&
              !detail.isDiscount &&
              (detail.isFree || isMemberFree || !is_member)
          "
        >
          <div class="info-left">
            <span style="font-size:.3456rem" v-if="detail.isFree">免费</span>
            <span
              style="font-size:.3456rem"
              v-if="!detail.isFree && isMemberFree"
              >会员免费</span
            >
            <span v-if="!isMemberFree && !detail.isFree && !is_member"
              ><span>￥</span
              ><span style="font-size:.3456rem">{{ detail.price }}</span></span
            >
          </div>
          <div class="info-right">
            {{ detail.acName }}
          </div>
        </div>
      </div>
      <div class="course-right">
        <img :src="detail.iconPath" alt="" />
        <div
          class="bottom-tips"
          v-if="
            !is_show_price &&
              !is_hidden_content &&
              (detail.isDiscount ||
                (kl_md.KLHY == 1 && !isMemberFree && is_member)) &&
              !detail.isFree
          "
        >
          <span class="tips-left"
            >{{ detail.isDiscount ? "活动价" : "会员价" }}:</span
          ><span class="tips-right"
            ><span style="font-size:.1728rem;">￥</span
            >{{
              detail.isDiscount
                ? detail.discountPrice
                : user_member && user_member.memberLevel === 0
                ? Number(detail.smallMemberPrice).toFixed(2)
                : user_member && user_member.memberLevel === 1
                ? Number(detail.middleMemberPrice).toFixed(2)
                : user_member && user_member.memberLevel === 2
                ? Number(detail.highMemberPrice).toFixed(2)
                : "0.00"
            }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["detail", "type", "memberDiscount", "user_member", "is_member"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      member_discount(state) {
        return state.member_discount;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),

    isMemberFree() {
      if (this.memberDiscount && JSON.stringify(this.memberDiscount) !== "{}") {
        if (
          this.memberDiscount.majorIds.includes(this.detail.majorId) ||
          this.memberDiscount.courseIds.includes(this.detail.id)
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    }
  },
  watch: {},
  methods: {
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    }
  },
  created() {
    console.log(this.detail);
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component__course_card_new {
  width: 7.2rem;
  margin-bottom: 0.24rem;
  .course-box {
    width: 6.624rem;
    height: 2.496rem;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 0.192rem;
    display: flex;
    justify-content: space-between;
    padding: 0.384rem 0.288rem;
    &.gelin-card{
      height: inherit;
      .course-left{
        width: 3.592rem;
        .course-name{
          margin-bottom: 1rem;
        }
        .course-info-not-discount{
          margin-top: 1.5rem;
        }
      }
      .course-right{
        height: 2.66rem;
        width: 2rem;
      }
    }
    .course-left {
      // width: 2.688rem;
      width: 3rem;
      height: 1.728rem;
      .course-name {
        font-size: 0.2688rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 0.384rem;
        height: 0.768rem;
        margin-bottom: 0.2rem;
      }
      .course-info-discount {
        .price {
          font-size: 0.2304rem;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: var(--theme-color);
          line-height: 0.288rem;
        }
        .course-content {
          display: flex;
          justify-content: space-between;
          margin-top: 0.1rem;
          .content-left {
            font-size: 0.2496rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: var(--theme-color);
            line-height: 0.3552rem;
          }
          .content-right {
            font-size: 0.2304rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 0.3167rem;
          }
        }
      }
      .course-info-not-discount {
        display: flex;
        justify-content: space-between;
        margin-top: 0.6rem;
        .info-left {
          font-size: 0.2304rem;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: var(--theme-color);
          line-height: 0.288rem;
        }
        .info-right {
          font-size: 0.2304rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 0.3167rem;
        }
      }
    }
    .course-right {
      // width: 3.0144rem;
      width: 2.592rem;
      height: 1.728rem;
      background: rgba(46, 46, 47, 0.16);
      border-radius: 0.1344rem;
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 0.1344rem;
      }
      .bottom-tips {
        position: absolute;
        left: 0;
        bottom: 0;
        // width: 1.92rem;
        padding: 0 0.3rem 0 0.1rem;
        height: 0.4608rem;
        // line-height: .4608rem;
        background: linear-gradient(148deg, #f0d2be 0%, #d2a279 100%);
        box-shadow: 0.0192rem 0px 0.1344rem 0px rgba(9, 9, 9, 0.5);
        border-radius: 0px 0.96rem 0px 0px;
        font-size: 0.1728rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        vertical-align: middle;
        .tips-left {
          font-size: 0.1728rem;
        }
        .tips-right {
          font-size: 0.3072rem;
          display: inline-block;
          transform: translateY(0.03rem);
        }
      }
    }
  }
}
</style>
<style lang="scss">
.component__course_card_new {
}
</style>
